/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import "./comment.css";
import img1 from '../../assets/images/info-img03.jpg'
import img2 from '../../assets/images/info-img04.jpg'
import img3 from '../../assets/images/info-img01.jpg'
import img4 from '../../assets/images/infoImg.jpg'
import img5 from '../../assets/images/nameImg.jpg'
import img6 from '../../assets/images/userImg.jpg'

import { HeartOutline, MessageOutline, DownOutline, UpOutline } from 'antd-mobile-icons'

export default class Comment extends Component {

    state = {
        infos: [
            {
                id: 0,
                name: '凌度',
                img: img1,
                text: '滴滴出行，全程无忧',
                link: {
                    title: '滴滴出行，全程无忧',
                    images: img2
                },
                picture: [],
                likenum: 9,
                comments: [
                    {
                        c_name: '秋香',
                        replay: '',
                        c_text: '赞~'
                    },
                    {
                        c_name: '至尊宝',
                        replay: '星星点灯',
                        c_text: '各种环保节能的的政策及措施都已成为我们耳熟能详的文明生活发展趋势。'
                    },
                    {
                        c_name: '大熊猫',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '小老虎',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '花蝴蝶',
                        replay: '小老虎',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '小老虎',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '花蝴蝶',
                        replay: '小老虎',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '小老虎',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '花蝴蝶',
                        replay: '小老虎',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                ],
            },
            {
                id: 1,
                name: '张小六',
                img: img1,
                text: '',
                link: {
                    title: '滴滴，注册司机接单拿奖励，随时随地可接单，赢取高额奖励，轻松赚外快',
                    images: img2
                },
                picture: [],
                likenum: 64,
                comments: [
                    {
                        c_name: '星星点灯',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '至尊宝',
                        replay: '星星点灯',
                        c_text: '各种环保节能的的政策及措施都已成为我们耳熟能详的文明生活发展趋势。'
                    },

                ],
            },
            {
                id: 2,
                name: '甲壳虫',
                img: img3,
                text: '2017年1月，心之向往，记我的西藏行，历时16天，川进青出。',
                link: {},
                picture: [img4],
                likenum: 64,
                comments: [
                    {
                        c_name: '星星点灯',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '至尊宝',
                        replay: '星星点灯',
                        c_text: '各种环保节能的的政策及措施都已成为我们耳熟能详的文明生活发展趋势。'
                    },

                ],
            },
            {
                id: 3,
                name: '甲壳虫',
                img: img3,
                text: '2017年1月，心之向往，记我的西藏行，历时16天，川进青出。',
                link: {},
                picture: [img4, img5, img6, img3],
                likenum: 64,
                comments: [
                    {
                        c_name: '星星点灯',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '至尊宝',
                        replay: '星星点灯',
                        c_text: '各种环保节能的的政策及措施都已成为我们耳熟能详的文明生活发展趋势。'
                    },
                    {
                        c_name: '星星点灯',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '至尊宝',
                        replay: '星星点灯',
                        c_text: '各种环保节能的的政策及措施都已成为我们耳熟能详的文明生活发展趋势。'
                    },
                ],
            },
            {
                id: 4,
                name: '甲壳虫',
                img: img3,
                text: '2017年1月，心之向往，记我的西藏行，历时16天，川进青出。',
                link: {},
                picture: [img4, img1, img3, img6, img2, img3, img5],
                likenum: 64,
                comments: [
                    {
                        c_name: '星星点灯',
                        replay: '',
                        c_text: '倡导节能环保，用以节约现有能源消耗量，提倡环保型新能源开发，造福社会。'
                    },
                    {
                        c_name: '至尊宝',
                        replay: '星星点灯',
                        c_text: '各种环保节能的的政策及措施都已成为我们耳熟能详的文明生活发展趋势。'
                    },

                ],
            }
        ],
        flag: 0,
        show: false,
        id: ''
    }

    // 点赞
    addnum = id => {
        if (this.state.flag === 0) {
            this.state.infos.forEach(item => {
                if (item.id === id) {
                    item.likenum++
                }
            })
            this.setState({ flag: 1 })
        }
        if (this.state.flag === 1) {
            this.state.infos.forEach(item => {
                if (item.id === id) {
                    item.likenum--
                }
            })
            this.setState({ flag: 0 })
        }
        this.setState({
            infos: this.state.infos
        })
    }

    // 显示评论
    showComment = (id) => {
        console.log('id', id);
        this.setState({
            id
        })
    }

    render () {
        const imgStyle1 = { width: '1.72rem', height: '1.72rem' }
        const imgStyle2 = { width: '1.34rem', height: '1.34rem', marginLeft: '0.04rem', marginBottom: '0.04rem' }
        const imgStyle3 = { width: '0.88rem', height: '0.88rem', marginLeft: '0.04rem', marginBottom: '0.04rem' }
        return (
            <ul className='comment'>
                {this.state.infos.map(item => {
                    return (
                        <li key={item.id} className='connect'>
                            <div className='left'>
                                <img src={item.img} style={{ width: '0.4rem', height: '0.4rem', borderRadius: '0.04rem' }} />
                            </div>
                            <div className='right'>
                                <b style={{ fontSize: '0.15rem', color: '#41454D' }} > {item.name}</b>

                                {/* 文案 */}
                                <p className='text'>{item.text}</p>

                                {/* 链接 */}
                                {!Object.keys(item.link).length == 0 && (
                                    <div className='link'>
                                        <img src={item.link.images} style={{ width: '0.4rem', height: '0.4rem', marginLeft: '0.06rem' }} />
                                        <p className='linktitle'>{item.link.title}</p>
                                    </div>
                                )}

                                {/* 图片 */}
                                {item.picture.length !== 0 && (
                                    item.picture.length === 1 ? (
                                        <div>
                                            {item.picture.map((pic, i) => {
                                                return (<img src={pic} alt='' style={imgStyle1} key={i} />)
                                            })}
                                        </div>) : (
                                        item.picture.length === 4 ? (
                                            <div>
                                                {item.picture.map((pic, i) => {
                                                    return (<img src={pic} alt='' style={imgStyle2} key={i} />)
                                                })}
                                            </div>) : (
                                            <div >
                                                {item.picture.map((pic, i) => {
                                                    return (<img src={pic} alt='' style={imgStyle3} key={i} />)
                                                })}
                                            </div>)
                                    )
                                )}

                                {/* 点赞 */}
                                <div className='like'>
                                    <HeartOutline style={{ fontSize: '0.17rem' }} onClick={() => this.addnum(item.id)} /><span className='span'>{item.likenum}</span>
                                    <MessageOutline style={{ fontSize: '0.17rem' }} /><span className='span'>评论</span>
                                    <p style={{ fontSize: '0.12rem', color: '#ACB1B7', marginTop: '0.06rem' }}>1小时前</p>
                                </div>

                                {/* 评论 */}
                                {item.comments.length !== 0 && (
                                    <div className='message'>
                                        {item.comments.map((i, index) => {
                                            return (
                                                <div key={index}>{
                                                    this.state.id === item.id ? (
                                                        i.replay === '' ? (
                                                            <p className='c_reply'><span className='c_name'>{i.c_name}</span>:{i.c_text}</p>
                                                        ) : (
                                                            <p className='c_reply'><span className='c_name'>{i.c_name}</span> 回复 <span className='c_name'>{i.replay}</span>:{i.c_text}</p>
                                                        )
                                                    ) :
                                                        (
                                                            index < 3 && (
                                                                i.replay === '' ? (
                                                                    <p className='c_reply'><span className='c_name'>{i.c_name}</span>:{i.c_text}</p>
                                                                ) : (
                                                                    <p className='c_reply'><span className='c_name'>{i.c_name}</span> 回复 <span className='c_name'>{i.replay}</span>:{i.c_text}</p>
                                                                )
                                                            )
                                                        )}
                                                </div>
                                            )
                                        })}

                                        {item.comments.length >= 3 && (this.state.id === item.id ? <p onClick={() => this.showComment()} ><span>收起</span>  <UpOutline /></p> : <p onClick={() => this.showComment(item.id)}><span>查看全部{item.comments.length}条评论</span>  <DownOutline /></p>)}
                                    </div>
                                )}
                            </div>
                        </li>
                    )
                })
                }
                <p className='all'>已显示全部内容</p>
            </ul >
            
        )
    }
}
